<template>
	<view>
		<view>
			<view style="margin: 20rpx 0 0 20rpx">
				<view style="display: inline-block;margin-right: 10rpx">
					<u-button shape="circle" size="medium" @click="condition.open()">
						<text style="font-size: 24rpx;
            font-weight: bold;
            color: #8c7d7d;padding: 0 20rpx">
							条件搜索
						</text>
					</u-button>
				</view>

				<view style="display: inline-block;margin-right: 10rpx">
					<u-button shape="circle" size="medium" @click="listSortPicker.open()">
						<text style="font-size: 24rpx;
            font-weight: bold;
            color: #8c7d7d;padding: 0 20rpx">
							表格排序
						</text>
					</u-button>
				</view>
			</view>
		</view>

		<!-- 排序条件选择器 -->
		<u-picker :show="listSortPicker.show" :columns="listSortPicker.options" @confirm="listSortPicker.confirm"
			@close="listSortPicker.close" @cancel="listSortPicker.close" title="选择某属性点击确定即可" :closeOnClickOverlay=true
			keyName="label">
		</u-picker>

		<!-- 条件状态选择器 -->
		<u-popup :show="condition.show" :round="10" mode="bottom" :direction=0 :closeable=true
			@close="condition.close()">
			<view>
				<view style="text-align: center;margin: 10px 0 20px 0 ">
					<text style="font-size: 34rpx;font-weight: bold">
						填充筛选条件(不填的条件不参与判断)
					</text>
				</view>
				<view style="margin: 10px 10px">
					<u--form labelPosition="left" labelWidth="auto">

						<u-form-item label="订单号包含 : ">
							<u--input v-model="condition.data.orderNum" :clearable=true border="bottom">
							</u--input>
						</u-form-item>

						<u-form-item label="用户id为 : ">
							<u--input v-model="condition.data.usId" :clearable=true border="bottom">
							</u--input>
						</u-form-item>

						<u-form-item label="订单状态 : ">
							<u-tag :text=options.status.text plain size="large" type="primary"
								@click="options.status.open"></u-tag>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>

						<u-form-item label="订单类型 : ">
							<u-tag :text=options.type.text plain size="large" type="success" @click="options.type.open">
							</u-tag>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>

						<u-form-item label="订单时间范围 : ">
							<view style="z-index:10000">
								<uni-datetime-picker hide-second="true" type="datetimerange"
									v-model="condition.data.createTime.value" @change="condition.data.createTime.change"
									rangeSeparator="至" />
							</view>
						</u-form-item>
					</u--form>
				</view>

				<view>
					<u-row gutter="1">
						<u-col :span="6">
							<u-button type="success" text="清空" @click="condition.def()"></u-button>
						</u-col>
						<u-col :span="6">
							<u-button type="primary" text="搜索" @click="condition.search()"></u-button>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-popup>

		<!-- 订单状态选择器 -->
		<u-picker :show="options.status.show" :columns="options.status.ops" @confirm="options.status.confirm"
			@close="options.status.close" @cancel="options.status.close" closeOnClickOverlay="true" title="选择订单状态"
			keyName="text">
		</u-picker>

		<!-- 订单类型选择器 -->
		<u-picker :show="options.type.show" :columns="options.type.ops" @confirm="options.type.confirm"
			@close="options.type.close" @cancel="options.type.close" closeOnClickOverlay="true" title="选择订单类型"
			keyName="text">
		</u-picker>

		<!-- 表格 -->
		<view style="margin: 20rpx 30rpx">
			<uni-table border stripe :loading=table.loading emptyText="您当前还没有相关订单哦.">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="200rpx">
						<text class="table-th-font">编号</text>
					</uni-th>

					<uni-th align="center" width="350rpx">
						<text class="table-th-font">创建时间</text>
					</uni-th>

					<uni-th align="center" width="150rpx">
						<text class="table-th-font">状态</text>
					</uni-th>

					<uni-th align="center" width="130rpx">
						<text class="table-th-font">类型</text>
					</uni-th>

					<uni-th align="center" width="200rpx">
						<text class="table-th-font">总价/实付</text>
					</uni-th>

					<uni-th align="center" width="400rpx">
						<text class="table-th-font">操作</text>
					</uni-th>
				</uni-tr>

				<!-- 数据行 -->
				<uni-tr v-for="(item,index) in table.data " :key="index">

					<uni-td align="center">
						<view class="orderNum">
							<view v-if="item.afterSalesStatus==1" class="refunTag">
								<u-tag text="退款单" type="warning" icon="car-fill" size="mini"></u-tag>
							</view>
							<view>
								{{item.orderNum}}
							</view>
						</view>
					</uni-td>

					<uni-td align="center">
						<text>{{ style.time(item.createTime) }}</text>
					</uni-td>

					<uni-td align="center">
						<rich-text :nodes="style.status(item.status)"></rich-text>
					</uni-td>

					<uni-td align="center">
						<rich-text :nodes="style.type(item.type)"></rich-text>
					</uni-td>

					<uni-td align="center">
						<text style="color: #2bfb6b;font-size: 24rpx">
							{{ item.totalPrice }}
						</text>
						<text style="margin: 0 2px">/</text>
						<text style="color: #ea1818;font-size: 28rpx">
							{{ item.realPrice }}
						</text>
					</uni-td>

					<uni-td align="center">
						<view style="display: inline-block;">
							<button type="primary" size="mini" @click="table.gotoDetail(item.orderNum)">
								<text>详情</text>
							</button>
						</view>

						<view style="display: inline-block;margin: 0 2px"
							v-if="item.hasTake === 1 && item.type === 1 && item.status === 1">
							<button type="default" size="mini" @click="noticeUserPickUp(item.orderNum)">
								<text>通知自提</text>
							</button>
						</view>

						<view style="display: inline-block;margin: 0 2px"
							v-if="$comm.checkNull(item.addressId)&&!$comm.checkNull(item.courierStatus)||item.courierStatus==0">
							<button type="default" size="mini" @click="openModal(item)">
								<text>发货</text>
							</button>
						</view>

						<!-- todo: 通知用户是否已摘 -->
						<!--<view style="display: inline-block" v-if="item.hasTake === 1 && item.type === 1 && item.status === 1">
              <button type="warn" size="mini">
                <text>确认已摘</text>
              </button>
            </view>-->

					</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<!-- 发货弹框 -->
		<u-modal :show="sendModal.show" title="填写物流信息" showCancelButton @cancel="sendModal.clean" @confirm="deliver()">
			<view class="slot-content">
				<u--form labelPosition="left" :model="sendModal" :rules="sendModalRules" ref="sendModal">
					<u-form-item label="快递单号" prop="number" borderBottom>
						<u--input placeholder="请输入快递单号" v-model="sendModal.number"></u--input>
					</u-form-item>
					<u-form-item label="快递公司" prop="company" borderBottom>
						<u--input placeholder="请输入快递公司" v-model="sendModal.company"></u--input>
					</u-form-item>
				</u--form>

			</view>
		</u-modal>

		<!-- 分页 -->
		<view style="text-align: center">
			<view style="display: inline-block;margin: 0 8rpx">
				<page-pagination :total="table.total" :pageSize="table.pageSize" :showAround="true" :btnText="true"
					:forceEllipses="true" @change="table.setPageNo">
				</page-pagination>
			</view>
		</view>
		<!--自己封装的提示器-->
		<popup ref="popup" />
	</view>
</template>

<script>
	import soTime from "@/js_sdk/fl-SOtime/SOtime.js"
	import UFormItem from "../../../uni_modules/uview-ui/components/u-form-item/u-form-item";
	import service from "../../../utils/service";
	import popup from "@/merchant/my/my-popup"
	export default {
		components: {
			UFormItem,
			popup
		},
		data() {
			var _vm = this
			return {
				sendModal: {
					show: false,
					number: "",
					company: "",
					orderNum: "",
					clean() {
						this.sendModal = {
							orderNum: "",
							show: false,
							number: "",
							company: "",
						}
					}
				},
				sendModalRules: {
					number: [{
						required: true,
						message: '快递单号不能为空',
						trigger: ['blur', 'change'],
					}],
					company: [{
						required: true,
						message: '快递公司不能为空',
						trigger: ['blur', 'change'],
					}]
				},
				/* 表格对象 */
				table: {
					loading: true,
					total: 0,
					pageSize: 10,
					pageNo: 1,
					data: [],
					setPageNo(v) {
						_vm.table.pageNo = v
						_vm.getList();
					},
					gotoDetail(id) {
						console.log("即将跳转到详情页 param: ", id)
						uni.navigateTo({
							url: "detail?id=" + id,
						})
					}
				},
				// 表格排序选择器
				listSortPicker: {
					show: false,
					// 排序字段
					sortKey: null,
					// 排序规则 1 正序 -1 倒序
					sort: -1,
					options: [
						[{
								label: '默认',
								key: null
							},
							{
								label: '总价',
								key: 'total_price'
							},
							{
								label: '实付',
								key: 'real_price'
							},
							{
								label: '创建时间',
								key: 'create_time'
							},
						],
						[{
								label: '从小到大',
								value: 1
							},
							{
								label: '从大到小',
								value: -1
							},
						],
					],
					// 确认回调
					confirm(v) {
						let me = _vm.listSortPicker;
						console.log("表格排序选项结果 : ", v)
						me.show = false;
						// 默认
						if (v.value[0].key === null) {
							me.sort = v.value[1].value;
						} else {
							me.sortKey = v.value[0].key;
						}
						me.sort = v.value[1].value;
						this.getList();
					},
					close() {
						_vm.listSortPicker.show = false;
					},
					open() {
						_vm.listSortPicker.show = true;
					}
				},
				/* 样式对象 */
				style: {
					/* 订单状态 */
					status(s) {
						switch (s) {
							case 0:
								return '<span style="color:#7bed9f">待付款</span>'
							case 1:
								return '<span style="color:#70a1ff">已付款</span>'
							case 2:
								return '<span style="color:#1e90ff">已核验</span>'
							case 3:
								return '<span style="color:#0984e3">待评价</span>'
							case 4:
								return '<span style="color:#ffa502">已完成</span>'
							case -1:
								return '<span style="color:#ff4757">已取消</span>'
							case -2:
								return '<span style="color:#ffa502">已退款</span>'
						}
					},
					/* 订单类型 */
					type(t) {
						switch (t) {
							case 1:
								return '<span style="color:#7bed9f">采摘</span>'
							case 2:
								return '<span style="color:#1e90ff">种植</span>'
						}
					},
					/* 时间 */
					time(v) {
						return soTime.time3(v)
					}
				},
				/* 条件筛选对象 */
				condition: {
					show: false,
					open() {
						_vm.condition.show = true;
					},
					close() {
						_vm.condition.show = false;
					},
					data: {
						/* 订单号 */
						orderNum: '',
						/* 用户id */
						usId: '',
						/* 订单状态 */
						status: null,
						/* 订单类型 */
						type: null,
						/* 创建日期范围 */
						createTime: {
							value: [],
							change(e) {
								console.log("选中团购日期 : ", e)
							}
						}
					},
					def() {
						_vm.condition.data.orderNum = '';
						_vm.condition.data.usId = '';
						_vm.condition.data.status = null;
						_vm.condition.data.type = null;
						_vm.condition.data.createTime.value = []
						_vm.options.status.def();
						_vm.options.type.def();
						_vm.condition.search();
					},
					search() {
						console.log("点击搜索 条件 : ", _vm.condition.data)
						_vm.condition.close();
						_vm.getList();
					}
				},
				/* 选项相关对象 */
				options: {
					/* 订单状态 */
					status: {
						show: false,
						ops: [
							[{
									text: "待付款",
									value: 0
								},
								{
									text: "已付款",
									value: 1
								},
								{
									text: "已核验",
									value: 2
								},
								{
									text: "待评价",
									value: 3
								},
								{
									text: "已完成",
									value: 4
								},
								{
									text: "已取消",
									value: -1
								},
								{
									text: "已退款",
									value: -2
								},
							]
						],
						text: '点击选择订单状态',
						close() {
							_vm.options.status.show = false;
						},
						open() {
							_vm.options.status.show = true
						},
						confirm(e) {
							console.log("订单状态被选中 : ", e)
							_vm.options.status.show = false
							_vm.condition.data.status = e.value[0].value
							_vm.options.status.text = e.value[0].text
						},
						def() {
							_vm.options.status.text = '点击选择订单状态'
						}
					},
					/* 订单类型 */
					type: {
						show: false,
						ops: [
							[{
									text: '采摘',
									value: 1
								},
								{
									text: '种植',
									value: 2
								},
							]
						],
						text: '点击选择订单类型',
						close() {
							_vm.options.type.show = false;
						},
						open() {
							_vm.options.type.show = true
						},
						confirm(e) {
							console.log("订单状态被选中 : ", e)
							_vm.options.type.show = false
							_vm.condition.data.type = e.value[0].value
							_vm.options.type.text = e.value[0].text
						},
						def() {
							_vm.options.type.text = '点击选择订单类型'
						}
					}
				}
			}
		},
		methods: {
			openModal(item) {
				this.sendModal.orderNum = item.orderNum
				this.sendModal.show = true
			},

			deliver() {
				this.$axios({
					url: 'merchant/merchantVegetable/deliver',
					method: "post",
					data: {
						number: this.sendModal.number,
						company: this.sendModal.company,
						orderNum: this.sendModal.orderNum
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: "发货成功",
							icon: "none"
						})
						this.sendModal.clean()
						console.log("this.sendModal: ", this.sendModal);
						this.sendModal.show = false
						this.getList()
					}

				})
			},
			getList() {
				let _t = this;
				let data = {}
				data.pageNo = this.table.pageNo
				data.pageSize = this.table.pageSize
				// 如果有排序字段添加排序字段
				if (this.listSortPicker.sortKey !== null) {
					data.sortKey = this.listSortPicker.sortKey;
					data.sort = this.listSortPicker.sort;
				}
				// 追加条件搜索字段
				if (!service.check.isNull(_t.condition.data.orderNum)) {
					data.orderNum = _t.condition.data.orderNum;
				}
				if (!service.check.isNull(_t.condition.data.usId)) {
					data.usId = _t.condition.data.usId;
				}
				if (!service.check.isNull(_t.condition.data.status)) {
					data.status = _t.condition.data.status;
				}
				if (!service.check.isNull(_t.condition.data.type)) {
					data.type = _t.condition.data.type;
				}
				if (_t.condition.data.createTime.value.length !== 0) {
					data.createTimeScope = JSON.stringify(_t.condition.data.createTime.value)
				}

				_t.table.loading = true
				this.$axios({
					url: 'merchant/merchantVegetable/orderList',
					method: "post",
					data: data,
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then(res => {
					console.log("merchant/merchantGroupGoods/list : ", res)
					if (res.code === 0) {
						_t.table.data = res.result.list;
						_t.table.pageNo = res.result.pageNo;
						_t.table.total = res.result.total
					}
					_t.table.loading = false;
				})
			},
			/* 通知自提 */
			noticeUserPickUp(orderNum) {
				let _t = this;
				this.$axios({
					url: 'merchant/merchantVegetable/noticeUser',
					method: "post",
					data: {
						orderNum: orderNum
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then(res => {
					console.log("merchant/merchantVegetable/noticeUser : ", res)
					if (res.code === 0) {
						_t.$refs.popup.success(res.result)
					}
				})
			}

		},
		onShow() {
			// 获取图像地址前缀
			this.imgApi = this.$reqConfig.URLIMAGE
			// 获取请求头类型
			this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
			// 获取token
			this.token = uni.getStorageSync("merchantsToken").token

			/* 获取列表 */
			this.getList();
		}
	}
</script>

<style lang="scss">
	#text-flow {
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 1;
		/*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden;
		/*溢出隐藏*/
	}

	.orderNum {
		display: flex;
		justify-content: space-around;
		position: relative;

		.refunTag {
			bottom: 35rpx;
			position: absolute;
			left: 0rpx;
		}
	}
</style>
